<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>罗店中学-罗中校歌</title>
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body class="history_bg">
    <!-- 顶部区域 start-->
    @@include('../_include/top.html',{"isOrange":"false","darkBlue":"true","schoolSong":"active"})
    <!-- // 顶部区域  end-->
    <div class="wrap reel-box" id="wrap-box">
        <div class="reel-l"></div>
        <div class="reel-cont">
            <div class="school-song">
                <audio id="audio" loop>
                    <source src="audio/luodian_song.mp3" type="audio/mpeg">
                    您的浏览器不支持 audio 元素。
                </audio>
                <img src="images/school-song.png" alt="">
                <div class="play-box">
                    <a href="javascript:void(0)" id="audioBtn" class="btn play" title="播放"></a>
                </div>
            </div>
        </div>
        <div class="reel-r"></div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(function () {
            $('.reel-box').addClass('opened');
            let audio = document.querySelector('#audio');
            //console.log(audio)
            $('#audioBtn').click(function(){
                let self = $(this);
                if(audio.paused){
                    audio.play();
                    self.addClass('pause').removeClass('play')
                }else{
                    audio.pause()
                    self.addClass('play').removeClass('pause')
                }
            })
        })
    </script>
</body>

</html>